<template>
  <div id="background">
    <el-container>
      <el-header  id="titleBackgroundMine">
                <div id="backgroundPosition"></div>
                <div id="boxPosition" ></div>
                <el-row type="flex" style="margin-top:30px" >
                     <el-col :xs="2" :sm="2" :md="2"  :offset="21">
                        <img v-bind:src="setImg" style="height:25px" @click="sheZhi"/>
                    </el-col>
                </el-row>
                <el-row type="flex" justify="center">
                    <el-col :xs="20" :sm="20" :md="20"  class="imgCol">
                        <el-avatar v-bind:size="photoSize" :src="info.head" >
                            <img src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png" />
                        </el-avatar>
                    </el-col>
                </el-row>
                <el-row type="flex" justify="center">
                    <el-col :xs="24" :sm="24" :md="24" class="imgCol">
                       <span class="words name" @click="goToZhuYe">{{this.info.nickname}}</span>
                    </el-col>
                </el-row>
                <el-row type="flex" justify="center" style="margin:0">
                    <el-col :xs="24" :sm="24" :md="24" class="imgCol">
                       <!-- <span class="vipWords" >V年费会员</span> -->
                    </el-col>
                </el-row>
                <el-row type="flex"  style="margin-top:10px">
                    <el-col :xs="5" :sm="6" :md="6" :offset="2" >
                        <div class="imgCol" style="margin-bottom:5px" @click="shouCang">
                            <img v-bind:src="shouCangIcon"  class="iconSize"/>
                        </div>
                        <div class="imgCol">
                            <span class="words smallWords" @click="shouCang">收藏</span>
                        </div>
                        <div class="imgCol">
                            <span class="words smallWords" >20</span>
                        </div>
                    </el-col>
                    <el-col :xs="2" :sm="2" :md="2" class="imgCol" >
                        <el-divider direction="vertical"></el-divider>
                    </el-col>
                    <el-col :xs="6" :sm="6" :md="6" >
                        <div class="imgCol" style="margin-bottom:5px" @click="cuoTi">
                            <img v-bind:src="cuoTiIcon"  class="iconSize"/>
                        </div>
                        <div class="imgCol">
                            <span class="words smallWords" @click="cuoTi" >错题</span>
                        </div>
                        <div class="imgCol">
                            <span class="words smallWords" >71</span>
                        </div>
                    </el-col>
                    <el-col :xs="2" :sm="2" :md="2"  class="imgCol">
                        <el-divider direction="vertical"></el-divider>
                    </el-col>
                    <el-col :xs="6" :sm="6" :md="6" >
                        <div class="imgCol" style="margin-bottom:5px" @click="jinBi">
                            <img v-bind:src="jinBiIcon"  class="iconSize"/>
                        </div>
                        <div class="imgCol">
                            <span class="words smallWords" @click="jinBi">金币</span>
                        </div>
                        <div class="imgCol">
                            <span class="words smallWords" >888</span>
                        </div>
                    </el-col>
                </el-row>
      </el-header>
      <el-main id="mineMainPosition">
         <el-row type="flex" class="mineHeight">
                    <el-col  :xs="20" :sm="20" :md="20"  class="imgCol">
                        <el-button class="mineBtn" @click="goToGeRen">
                            <i class="el-icon-user-solid" style="padding:15px"></i>个人中心                                                     
                        </el-button>
                    </el-col>
                    <el-col :xs="2" class="imgCol">
                        <i class="el-icon-arrow-right el-icon--right" @click="goToGeRen"></i>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col class="imgCol">
                        <div class="line"></div>
                    </el-col>
                </el-row>
                 <el-row type="flex" class="mineHeight">
                    <el-col  :xs="20" :sm="20" :md="20"   class="imgCol">
                        <el-button class="mineBtn" @click="gouMai">
                            <i class="el-icon-shopping-cart-full"  style="padding:15px"></i>我的购买                                                     
                        </el-button>
                    </el-col>
                    <el-col :xs="2" class="imgCol">
                        <i class="el-icon-arrow-right el-icon--right" @click="gouMai"></i>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col class="imgCol">
                        <div class="line"></div>
                    </el-col>
                </el-row>
                 <el-row type="flex" class="mineHeight">
                    <el-col :xs="20" :sm="20" :md="20" class="imgCol">
                        <el-button class="mineBtn" @click="goToKeBiao">
                            <i class="el-icon-notebook-2"  style="padding:15px"></i>我的课表                                                    
                        </el-button>
                    </el-col>
                    <el-col :xs="2" class="imgCol" >
                        <i class="el-icon-arrow-right el-icon--right" @click="goToKeBiao"></i>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col class="imgCol">
                        <div class="line"></div>
                    </el-col>
                </el-row>
                 <el-row type="flex" class="mineHeight">
                    <el-col  :xs="20" :sm="20" :md="20" class="imgCol">
                        <el-button class="mineBtn" @click="goToXiaZai">
                            <i class="el-icon-download"  style="padding:15px"></i>我的下载                                                    
                        </el-button>
                    </el-col>
                    <el-col :xs="2" class="imgCol">
                        <i class="el-icon-arrow-right el-icon--right" @click="goToXiaZai"></i>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col class="imgCol">
                        <div class="line"></div>
                    </el-col>
                </el-row>
                <el-row type="flex" class="mineHeight">
                    <el-col  :xs="20" :sm="20" :md="20" class="imgCol">
                        <el-button class="mineBtn" @click="goToJinBi">
                            <i class="el-icon-share"  style="padding:15px"></i>分享赚金币                                                    
                        </el-button>
                    </el-col>
                    <el-col :xs="2" class="imgCol">
                        <i class="el-icon-arrow-right el-icon--right" @click="goToJinBi"></i>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col class="imgCol">
                        <div class="line"></div>
                    </el-col>
                </el-row>
      </el-main>
      <el-footer id="bottomPositionMine" class="foot">
        <div>
                <el-row type="flex" justify="space-around" style="margin-top:10px">
                   <el-col :xs="6" :sm="6" :md="6">
                        <div class="imgCol">
                            <img v-bind:src="peiXunIcon" class="mainIconSize" @click="goToPeiXun">
                        </div>
                        <div class="imgCol">
                            <span class="words littleWords" @click="goToPeiXun">培训</span>
                        </div>
                    </el-col>
                     <el-col :xs="6" :sm="6" :md="6">
                        <div class="imgCol">
                            <img v-bind:src="zhaoPinIcon"  class="mainIconSize" @click="goToZhaoPin"/>
                        </div>
                        <div class="imgCol" @click="goToZhaoPin">
                            <span class="words littleWords">招聘</span>
                        </div>
                    </el-col>
                     <el-col :xs="6" :sm="6" :md="6">
                        <div class="imgCol">
                            <img v-bind:src="xiaoXiIcon"  class="mainIconSize" @click="goToXiaoXi"/>
                            <!--<i class="el-icon-chat-dot-square" style="font-size:24px;color:#707070" ></i>-->
                        </div>
                        <div class="imgCol" @click="goToXiaoXi">
                            <span class="words littleWords">消息</span>
                        </div>
                    </el-col>
                     <el-col :xs="6" :sm="6" :md="6">
                        <div class="imgCol">
                            <img v-bind:src="woDeIcon"  style="color:#53cdf5" class="mainIconSize"/>
                        </div>
                        <div class="imgCol">
                            <span class="words littleWords" style="color:#53cdf5"  >我的</span>
                        </div>
                    </el-col>
                </el-row>
        </div>
      </el-footer>
    </el-container>
  </div>
</template>
<script>
import setImg from '../../assets/img/mine/set.png'
import boxImg from '../../assets/img/mine/box.png'
import shouCangIcon from '../../assets/img/mine/heart.png'
import cuoTiIcon from '../../assets/img/mine/cuoti.png'
import jinBiIcon from '../../assets/img/mine/money.png'
import peiXunIcon from '../../assets/img/mine/peixun.png'
import zhaoPinIcon from '../../assets/img/mine/zhaopin.png'
import xiaoXiIcon from '../../assets/img/mine/news.png'
import woDeIcon from '../../assets/img/mine/mineChoose.png'
import userPhoto from '../../assets/img/mine/geRenZhuYe/test.jpg'
import { Toast } from 'vant';
export default {
  data(){
    return{
            setImg:setImg,
            boxImg:boxImg,
            shouCangIcon:shouCangIcon,
            cuoTiIcon:cuoTiIcon,
            jinBiIcon:jinBiIcon,
            peiXunIcon:peiXunIcon,
            zhaoPinIcon:zhaoPinIcon,
            xiaoXiIcon:xiaoXiIcon,
            woDeIcon:woDeIcon,
            userPhoto:userPhoto,
            normalHeight:document.documentElement.clientHeight,
            normalWidth:document.documentElement.clientWidth,
            photoSize:70,
            //个人主页信息
            info:{
                username:'',
                realname:'',
                nickname:'',
                occupation:'',
                hasQualification:false,
                birthday:'',
                location:'',
                head:'',
            }
    }
  },
  mounted(){
        var normalHeight=sessionStorage.getItem('normalHeight');
        var bg = document.getElementById("background");
       // normalHeight=document.documentElement.clientHeight;
        console.log("height:"+normalHeight);
        bg.style.height = normalHeight+"px";
        bg.style.backgroundColor = "#FFFFFF"
        bg.style.margin = "0px";

         var head=document.getElementById("titleBackgroundMine");
        var main=document.getElementById("mineMainPosition");
        // var bottom=document.getElementById("bottomPositionMine");
        if(normalHeight<800){
            console.log("<800");
            var headHeight=normalHeight/30 *13; 
            var mainHeight=normalHeight/30 *14;
            // var botHeight=normalHeight/30 *3;
        }else{
            console.log(">800");
            var headHeight=normalHeight/40 *14 ;
            var mainHeight=normalHeight/40 *23;
            // var botHeight=normalHeight/40 *3;
        }

        if(this.normalWidth<325){
            this.photoSize=60;
        }else if(this.normalWidth<400){
            this.photoSize=70;
        }else{
            this.photoSize=80;
        }
        console.log("photoSize:"+this.photoSize);
        console.log("headHeight:"+headHeight);
        head.style.height=headHeight+"px";
        console.log("mainHeight:"+mainHeight);
        main.style.height=mainHeight+"px"; 
        // console.log("btnHeight:"+botHeight);
        // bottom.style.height=botHeight+'px';
   
        this.getGeRenZhuYe();
  },
    methods:{
        goToJinBi(){
            this.$router.push({
                path:'/mine/jinBi'
            })
        },
        sheZhi(){
            this.$router.push({
                path:'/mine/sheZhi'
            })
        },
        gouMai(){
            this.$router.push({
                path:'/mine/gouMai'
            })
        },
        jinBi(){
            this.$router.push({
                path:'/mine/jinBi'
            })

        },
        cuoTi(){
            this.$router.push({
                path:'/mine/cuoTi'
            })

        },
        shouCang(){
            this.$router.push({
                path:'/mine/shouCang'
            })

        },
        goToGeRen(){
            this.$router.push({
                path:'/mine/geRen',
            })
        },
    
        goToXiaoXi(){
          this.$router.push({
            path:'/xiaoXi'
          })
        },
        goToZhaoPin(){
            this.$router.push({
                path:'/zhaoPin'
            })  
        },
        goToKeBiao(){
            this.$router.push({
                path:'/mine/keBiao'
            })
        },
        goToXiaZai(){
            this.$router.push({
                path:'/mine/xiaZai'
            })
        },
        goToZhuYe(){
            this.$router.push({
                path:'/mine/zhuYe'
            })
        },
        goToPeiXun(){
            this.$router.push({
                path:'/peiXun'
            })
        },
        //获取个人主页信息
        getGeRenZhuYe(){
            var URL=this.IP.IP+'/user/mainInfo';
            console.log(URL);
            this.$ajax({
                method:'get',
                url:URL,
            }).then(response=>{
                console.log(response.data);
                var code=response.data.code;
                if(code==0){
                    this.info=response.data.data;
                }else{
                    Toast(response.data.msg);
                }
            }).catch(error=>{
                console.log(error);
                //Toast(error);
            })
        }
  }
}
</script>
<style>
.foot{
  position: fixed;
  bottom: 0;
  width: 100%;
  z-index: 2;
  background-color: #fff;
  border-top: 1px solid #f5f4f9;
}
.el-main {
    padding: 0px ;
}
.el-footer {
    padding:0px;
}
#titleBackgroundMine{
    position: relative;
    background-color: #F8F8F8;
}
#backgroundPosition{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    background: url(../../assets/img/mine/background.png) no-repeat;
    /**相应图片按比例伸缩*/
    background-size: 100%;
}
#boxPosition{
    position:absolute;
    top: 55px;
    left: 0;
    right: 0;
    bottom: 0;
    height: 80%;
    width: 100%;
    margin: 0 auto;
     background: url(../../assets/img/mine/box.png) no-repeat;
    /**相应图片按比例伸缩*/
    background-size: 100%;
}
.imgCol{
    display:flex;
    align-items:center;
    justify-content:center
}
.avatar-uploader .el-upload {
    border: none;
    border-radius: 50px;
    cursor: pointer;
    position: relative;
}

/**
.avatar-uploader .el-upload:hover {
    border-color: #53cdf5;
}*/

.words{
    color:#909090;
}
.littleWords{
  margin-top:5px;
    font-size: 13px;
}
.smallWords{
     font-size: 10px;
}
.name{
    font-size: 1em;
}
.vipWords{
    font-size: 13px;
    font-style: italic;
    color: #fbaa59;
}
.mineHeight{
    height: 18%;
    /* height: 55px; */
}
.mineBtn{
    border-style: none;
    outline: none;
    width: 100%;
    text-align: left;
    border: none;
    background-color: rgb(255,255,255,0);
    color: #707070;
    font-size: 1em;
}
.line{
    width: 90%;
    height: 1px;
    background-color: #F0F0F0;
}
.lineBottom{
    width: 100%;
    height: 1px;
    background-color: #F0F0F0;
}
.iconSize{
    height: 28px;
}
.mainIconSize{
    height:23px;
}

.bottomMargin{
    margin-bottom:5px;
    margin-top:12px
}
@media screen and (max-height: 600px){
.bottomMargin{
    margin-bottom:5px;
    margin-top:6px
}
}
@media screen and (min-height: 700px) and (max-height:800px){
.bottomMargin{
    margin-bottom:5px;
    margin-top:17px
    }
}
@media screen and (min-height: 800px){
.bottomMargin{
    margin-bottom:5px;
    margin-top:7px
    }
}
</style>
